<template>
  <el-tooltip
    :visible="tooltipFlag"
    placement="top-start"
    :offset="offset"
    :popper-class="`basic-tooltip ${popperClass}`"
    :content="content"
  >
    <div
      class="text-ell"
      :class="props.class"
      @click="$emit('click')"
      @mouseenter="onMouseenter"
      @mouseleave="onMouseleave"
    >
      <slot>
        {{ content }}
      </slot>
    </div>
  </el-tooltip>
</template>

<script setup lang="ts">
interface IProps {
  content: string
  clamp?: number
  class?: string
  offset?: number
  popperClass?: string
}

interface IEmit {
  (event: 'click'): void
}

defineEmits<IEmit>()

const tooltipFlag = ref(false)

function onMouseenter(event: MouseEvent) {
  // @ts-ignore
  tooltipFlag.value = event.target.scrollHeight > event.target.clientHeight
  // tooltipFlag.value = event.target.scrollWidth > event.target.offsetWidth
}

function onMouseleave() {
  tooltipFlag.value = false
}

const props = withDefaults(defineProps<IProps>(), {
  content: '',
  clamp: 1,
  class: ''
})
</script>

<style lang="scss" scoped>
.text-ell {
  width: 100%;
  flex: 1;
  padding: 0;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: v-bind(clamp);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  white-space: normal;
  line-height: 20px;
}
</style>
